<!-- 火情报警描述 -->
<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block style="color: #777777;font-size: 48rpx;" slot="content">火情报警描述</block>
		</cu-custom>

		<view class="cu-form-group margin-top">
			<view class="title">区域名称</view>
			<picker mode="multiSelector" @change="bindPickerChange" @columnchange="columnchange" :value="index"
				:range="array" range-key="name">
				<view class="uni-input">{{name}}</view>
			</picker>
		</view>


		<view class="cu-form-group margin-top">
			<view class="title">火情地址</view>
			<input v-model="address" placeholder="火情地址" name="input"></input>
		</view>

		<view class="video_tip">
			<text>录制视频 （录制15s短视频</text>
		</view>

		<view v-if="isupload" class="upload_css flex justify-center align-center" @click="saveVideo">
			<uni-icons type="plusempty" size="50"></uni-icons>
		</view>

		<view v-if="!isupload" class="my-video">
			<!-- v-if="videoPath !== ''" -->
			<video class="video_f" :show-fullscreen-btn="showfullscreenbtn" :src="videoPath"
				@error="videoErrorCallback">

			</video>
			<!-- <uni-icons @click="close_f" class="close_icon" color="red" type="closeempty" size="30"></uni-icons> -->
		</view>

		<view class="padding flex flex-direction">
			<button class="cu-btn margin-tb-sm lg my-btn" @click="submit">确认火情</button>

		</view>
		
		<!-- <button @click="getAn()">ggg</button> -->

	</view>
</template>

<script>
	import * as constants from '@/common/config.js';
	import {
		formatDates
	} from '@/common/formatDate.js';
	export default {
		onLoad() {
			this.getCate()
		},
		data() {
			return {
				isupload: true,
				videoPath: '',
				showfullscreenbtn: false,
				serverVideoUri: '',

				// picker下拉数据源
				index: [0, 0],
				array: [
					[],
					[]
				],
				name: '请选择',
				data: [],
				childArr: [], // 二级分类数据源
				submitId: '',
				address: '',
				lastObj:null,
				title:''
			}
		},
		methods: {
			
			getAn() {
				let [a,b] = this.index
				let child = this.data[a]
				let lastChild = child.children[b]
				this.lastObj = lastChild
			},
			getCate() {
				let that = this
				let app = getApp()
				app.globalData.request({
					url: 'wx/fireInfo/getSubfieldRegionList',
					data: {

					}
				}).then(function(res) {
					that.data = res.data.data
					// 一级分类的数据源
					that.array[0] = that.data
					// 将数据源中的二级分类 push 进 childArr，作为二级分类的数据源
					that.childArr = (that.data).map((item) => item.children)
					// 第一次打开时，默认给一级分类添加它的二级分类
					that.array[1] = that.childArr[0]


				}).catch(function(e) {
					console.info("e:", e)
				})
			},
			// 获取二级分类
			columnchange(e) {
				// 当滚动切换一级分类时，为当前的一级分类添加它的子类
				if (e.detail.column == 0) {
					// #ifdef H5
					// 在小程序中直接赋值无效  H5 可直接赋值
					this.array[1] = this.childArr[e.detail.value]
					// #endif
					// #ifdef MP-WEIXIN
					// 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
					this.$set(this.array, 1, this.childArr[e.detail.value])
					// #endif
				}
			},

			// 选择任务分类
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				let value = e.target.value;
				this.index = value;
				if (this.array[0].length != 0) {
					this.name = this.array[0][this.index[0]].name
				};
				if (this.array[1].length != 0) {
					this.name += ',' + this.array[1][this.index[1]].name
				}

			},
			videoErrorCallback: function() {
				uni.showModal({
					content: '视频加载失败',
					showCancel: false
				});
			},
			submit() {
				
				
				if (this.submitId == "" || this.address == "") {
					uni.showToast({
						title: "数据不完整"
					})
					return;
				}
				let params = {
					"location": this.address,
					"ucId": this.submitId
				}
				// 生成报警信息
				let app = getApp()
				app.globalData.request({
					url: 'wx/firealarm/confirmFire',
					data: {
						...params
					}
				}).then(function(res) {
					let data = res.data.code
					console.info("报警成功返回数据:"+data)
					if (data == 0) {
						uni.showToast({
							title: "报警成功"
						})
						// 跳转报警成功页面
						uni.navigateTo({
							url:'../bjcg/bjcg?noticeId='+res.data.data.noticeId
						})
					}

				}).catch(function(e) {})
			},
			close_f() {
				console.log("取消.............")
				this.videoPath = ''
				this.isupload = !this.isupload
			},
			saveVideo() {
				this.getAn()
				
				
				let _this = this;
				_this.isupload = false
				uni.chooseVideo({
					count: 1,
					maxDuration: 15,
					sourceType: ['camera'],
					success: res => {
						console.log(res.tempFilePath)
						this.videoPath = res.tempFilePath;
						// this.getTempFilePath(res.tempFilePath, 'videoTempPath');

						// 上传
						let app = getApp()
						let token = app.globalData.getToken('authorization')
						uni.uploadFile({
							url: constants.API + 'wx/common/upload',
							filePath: this.videoPath,
							header: {
								"authorization": token
							},
							name: 'file',
							success: (uploadFileRes) => {
								console.info("--------->>>>>>>",_this.lastObj)
								_this.serverVideoUri = uploadFileRes.data.data
								console.info("9999999:" + formatDates(new Date(),
									"yyyy-MM-dd hh:mm:ss"))
								let params = {
									"addTime": formatDates(new Date(), "yyyy-MM-dd hh:mm:ss"),
									"addressDescription": _this.lastObj.name,
									"regionId":_this.lastObj.ucId,
									"reportTime": formatDates(new Date(),
										"yyyy-MM-dd hh:mm:ss"),
									"updateTime": formatDates(new Date(),
										"yyyy-MM-dd hh:mm:ss"),
									"videoUrl": _this.serverVideoUri,
									"type": 0
								}
								// 生成报警信息
								let app = getApp()
								app.globalData.request({
									url: '/wx/firealarm/generateAlarmRecord',
									data: {
										...params
									}
								}).then(function(res) {
									let data = res.data.data
									_this.submitId = data

								}).catch(function(e) {})
							}
						});
					},
					fail: (err) => {
						_this.isupload = true
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.camera'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机获取视频，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
					}
				});
			},
			// getTempFilePath(url, types) {
			// 	uni.showLoading({
			// 		title: '保存中...'
			// 	});
			// 	// 如果已经下载本地路径，那么直接储存
			// 	let obj = {
			// 		filePath: url,
			// 		success: () => {
			// 			uni.showModal({
			// 				content: '保存成功',
			// 				showCancel: false
			// 			});
			// 			uni.hideLoading();
			// 		},
			// 		fail: e => {
			// 			uni.hideLoading();
			// 			uni.showModal({
			// 				content: '保存失败',
			// 				showCancel: false
			// 			});
			// 		}
			// 	};

			// 	if (types === 'videoTempPath') {
			// 		uni.saveVideoToPhotosAlbum(obj);
			// 	} else {
			// 		uni.saveImageToPhotosAlbum(obj);
			// 	}
			// }
		}

	}
</script>

<style scoped>
	.video_tip {
		font-size: 24rpx;
		color: #777777;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
	}

	.video_tip text::before {
		content: '';
		border: 6rpx solid #FAB539;
		margin: 0 8rpx 0 8rpx;
	}

	.upload_css {
		width: 200rpx;
		height: 200rpx;
		background-color: #eaeaea;
		margin: 20rpx 40rpx;
	}

	.my-video {
		margin: 20rpx 40rpx;
		width: 200rpx;
		position: relative;
	}

	.video_f {
		width: 200rpx;
		height: 200rpx;

	}



	.close_icon {
		position: absolute;
		right: -10rpx;
		top: -20rpx;
		height: 40rpx;
		width: 40rpx;
	}

	.my-btn {
		height: 94rpx;
		margin-top: 80px;
		background-image: linear-gradient(90deg, #FAB53A 4%, #EFA21A 99%);
		box-shadow: 0 0 12px 0 rgba(250, 181, 58, 0.50);
		border-radius: 24px;
		ont-family: PingFangSC-Medium;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: center;
	}
</style>
